<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>sub-list</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/lib/layuimini2/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/lib/layuimini2/css/public.css" media="all">
	<link rel="stylesheet" href="/css/common.css" media="all">
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">
		<fieldset class="table-search-fieldset">
			<legend>上级字典</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">键</label>
							<div class="layui-input-inline">
								<input type="text" id="pkey" readonly autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">值</label>
							<div class="layui-input-inline">
								<input type="text" id="pval" readonly autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
				</form>
			</div>
		</fieldset>
		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">键</label>
							<div class="layui-input-inline">
								<input type="text" name="key" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">值</label>
							<div class="layui-input-inline">
								<input type="text" name="value" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary" lay-submit
							        lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索
							</button>
							<button type="button" class="layui-btn layui-btn-normal" id="add">
								<i class="layui-icon layui-icon-add-1"></i>添加
							</button>
							<button type="button" class="layui-btn layui-btn-primary" id="close">
								<i class="layui-icon layui-icon-close"></i>关闭
							</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset>

		<table class="layui-hide" id="dataTableId" lay-filter="dataTableFilter"></table>

		<script type="text/html" id="dataTableBar">
			<a class="layui-btn layui-btn-xs" lay-event="add">添加</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

	</div>
</div>
<form class="layui-form layui-form-pane" id="layerForm" lay-filter="dataForm" style="display: none;padding:5px">
	<input type="hidden" name="id" id="id"/>
	<input type="hidden" name="parentId" id="parentId"/>
	<div class="layui-form-item" id="pItem">
		<label class="layui-form-label">上级字典</label>
		<div class="layui-input-block  col12">
			<input id="pName" type="text" readonly class="layui-input">
		</div>
	</div>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label required">键</label>
			<div class="layui-input-block  col12">
				<input type="text" name="dicKey" id="dicKey" lay-verify="required" lay-reqtext="键不能为空"
				       placeholder="请输入键" value="" class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label required">值</label>
			<div class="layui-input-block  col12">
				<input type="text" name="dicValue" id="dicValue" lay-verify="required" lay-reqtext="值不能为空"
				       placeholder="请输入值" value="" class="layui-input">
			</div>
		</div>
	</div>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label required">排序</label>
			<div class="layui-input-block  col12">
				<input type="text" name="dictOrder" value="" class="layui-input" placeholder="请输入数字"
				       lay-verify="positiveInteger">
			</div>
		</div>
	</div>

	<div class="layui-form-item btns">
		<div class="layui-input-block">
			<button id="submitBtn" class="layui-btn layui-btn-radius" lay-submit lay-filter="layerForm">确定</button>
			<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
		</div>
	</div>
</form>


<script src="/lib/layuimini2/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<script src="/lib/layuimini2/js/lay-config.js" charset="utf-8"></script>
<script>
	layui.use(['form', 'table', 'miniTab', 'treetable'], function () {
		var $ = layui.jquery,
			form = verifyForm(layui.form),
			miniTab = layui.miniTab,
			table = layui.table,
			treetable = layui.treetable;
		var layerFormIdx;

		$(".btns .cancel").click(function () {
			layer.closeAll();
		});
		$("#close").click(function () {
			miniTab.deleteCurrentByIframe();
		});
		$("#pkey").val(getQueryString("pkey"));
		$("#pval").val(getQueryString("pval"));

		// 渲染表格
		renderTreeTable();

		//监听工具条
		table.on('tool(dataTableFilter)', function (obj) {
			var data = obj.data;
			var layEvent = obj.event;

			if (layEvent == 'add') {
				$("#layerForm")[0].reset();
				$("#pName").val(data.dicValue);
				$("#pItem").show();
				$("#parentId").val(data.id);
				$("#id").val("");
				layerFormIdx = layerForm(layer, $, {
					title: '添加',
					content: $("#layerForm"),
					type: 1,
					area: "300px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("layerForm", '/dict/add', "添加");
			} else if (layEvent == 'edit') {
				$("#layerForm")[0].reset();
				$("#pItem").hide();
				form.val("dataForm", data);
				layerFormIdx = layerForm(layer, $, {
					title: '修改',
					content: $("#layerForm"),
					type: 1,
					area: "300px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("layerForm", '/dict/update', "修改");
			} else if (layEvent == 'del') {
				layer.confirm('确定删除吗？', function (index) {
					myAjax($, layer, {
						url: "/dict/del",
						type: 'POST',
						data: {
							id: obj.data.id
						},
						dataType: "json",
						success: function (d, s) {
							if (d.code == 1) {
								layer.msg('删除成功', {icon: 1, time: 1500});
								renderTreeTable();
							}
						}
					});
					layer.close(index);
				});
			}
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			//执行搜索重载
			renderTreeTable(data.field);
			return false;
		});

		$("#add").click(function () {
			$("#layerForm")[0].reset();
			$("#id").val("");
			$("#parentId").val(getQueryString("pid"));
			$("#pName").val($("#pval").val());
			$("#pItem").show();
			layerFormIdx = layerForm(layer, $, {
				title: '添加字典',
				content: $("#layerForm"),
				type: 1,
				area: "300px",
				shade: 0.2,
				maxmin: true,
				shadeClose: false,
			});
			submitLayerForm("layerForm", '/dict/add', "添加");
		});

		function submitLayerForm(filter, url, action, row) {
			form.on('submit(' + filter + ')', function (data) {
				myAjax($, layer, {
					url: url,
					type: 'POST',
					data: data.field,
					dataType: "json",
					success: function (d, s) {
						if (d.code == 1) {
							layer.msg(action + '成功', {icon: 1, time: 1500});
							renderTreeTable();
						}
					},
					complete: function (xhr, status) {
						layer.close(layerFormIdx);
					}
				});
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
		}

		function renderTreeTable(query) {
			query = query || {};
			query.pid = getQueryString("pid");
			myTreeTableRend(treetable, layer, {
				treeColIndex: 1,
				treeSpid: query.pid,
				treeIdName: 'id',
				treePidName: 'parentId',
				elem: '#dataTableId',
				url: '/dict/list',
				where: query,
				page: false,
				cols: [[
					{field: 'id', width: 80, title: 'ID'},
					{field: 'dicKey', title: '键'},
					{field: 'dicValue', title: '值', align: "center"},
					{title: '操作', width: 150, toolbar: '#dataTableBar', align: "center", fixed: "right"}
				]]
			});
		}

	});


</script>

</body>
</html>